<template>
	<view class="search">

		<view class="left" v-if="!showSearchStatus">
			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" @change="change"
				:border="false" :clearIcon="false" />
			<uni-section :title="'日期范围用法：' + '[' + range + ']'" type="line"></uni-section>
		</view>

		<view class="searchBox" v-if="showSearchStatus">
			<input class="uni-input" placeholder="请输入查询关键字" :value="inputClearValue" @input="clearInput" />
			<uni-icons class="uni-icon" v-if="showClearIcon" @click="clearIcon" type="close" size="36"></uni-icons>
		</view>

		<view class="right" v-if="!showSearchStatus">
			<image src="../../common/images/搜索.png" @click="showSearch"></image>
		</view>

		<view class="right" v-if="showSearchStatus">
			<uni-icons @click="showSearch" type="calendar" size="36"></uni-icons>
		</view>


	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { request } from '../../utils/request'
	// import "UniDatetimePicker " from 'uni-datetime-picker'
	let range = ref([])
	let showSearchStatus = ref(false)
	let inputClearValue = ref('')
	let showClearIcon = ref(false)
	const maskClick = () => {
		console.log('Mask clicked, do something...');
		// 在这里处理遮罩层点击事件
	}
	const change = (e) => {
		console.log('change事件:', e);
	}

	const showSearch = () => {
		showSearchStatus.value = !showSearchStatus.value
	}

	const clearInput = async (event) => {
		inputClearValue.value = event.detail.value;
		if (event.detail.value.length > 0) {
			showClearIcon.value = true;
		} else {
			showClearIcon.value = false;
		}
	}

	const clearIcon = () => {
		inputClearValue.value = '';
		showClearIcon.value = false;
	}
</script>

<style lang="scss" scoped>
	.search {
		margin-top: 30rpx;
		width: 100%;
		height: 100rpx;
		// border: 1px solid red;
		display: flex;

		.left {
			width: 70%;
			height: 100%;
			padding-left: 16rpx;

			:deep() {
				.uni-date-range {
					height: 100rpx;
					color: #363637;
					// border: 1px solid #363637;
					border-radius: 30rpx;
					box-shadow: 0rpx 0rpx 10rpx 0rpx #363637;
				}

				.uniui-calendar[data-v-d31e1c47]:before {
					color: #363637;
				}

			}


		}


		.right {
			// border: 1px solid blue;
			width: 30%;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 16rpx;

			image {
				padding: 20rpx;
				width: 50rpx;
				height: 50rpx;
				// border: 1px solid red;
			}
		}

		.searchBox {
			width: 70%;
			height: 100%;
			padding-left: 16rpx;
			display: flex;
			// border: 1px solid red;
			justify-content: flex-start;
			align-items: center;
			position: relative;

			input {
				width: 100%;
				// border: 1px solid red;
				height: 100rpx;
				color: #363637;
				// border: 1px solid #363637;
				border-radius: 30rpx;
				box-shadow: 0rpx 0rpx 10rpx 0rpx #363637;
				padding-left: 16rpx;
			}

			.uni-icons {
				position: absolute;
				right: 0;
			}

		}
	}
</style>